<template>
	<view class="app_main">
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight + 'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="header_ele">
					<RolePlay role_Play="u-network"></RolePlay>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view
					class="navbar-content"
					:style="{width: navBarWidth + 'px', height: navBarHeight + 'px'}"
				>
					<RolePlay role_Play="u-network"></RolePlay>
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<view :style="{height: navbarStatusHeight + navBarHeight + 'px'}"></view>
		</view>
		<view class="logo_main">
			<view class="title_log_in" v-if="loginForm.type == 2">
				<p class="m_title">欢迎登录</p>
				<p class="tip">使用已注册的手机号登录</p>
			</view>
			<view class="title_log_in" v-else>
				<p class="m_title">验证码登录</p>
				<p class="tip">获取验证码</p>
			</view>
			<view class="login" v-if="loginForm.type == 2">
				<uni-forms :modelValue="loginForm">
					<uni-easyinput
						type="number"
						placeholderStyle="font-size:28rpx;"
						v-model="loginForm.phone"
						maxlength="11"
						placeholder="请输入手机号"
					/>
					<uni-easyinput
						type="password"
						placeholderStyle="font-size:28rpx;"
						@input="nextTick(() => (loginForm.password = pattern($event)))"
						v-model="loginForm.password"
						placeholder="请输入密码"
					/>
				</uni-forms>
			</view>
			<view class="login" v-else>
				<uni-forms :modelValue="loginForm">
					<uni-easyinput
						type="number"
						placeholderStyle="font-size:28rpx;"
						maxlength="11"
						v-model="loginForm.phone"
						placeholder="请输入手机号"
					/>
					<view class="code_re">
						<uni-easyinput
							type="number"
							placeholderStyle="font-size:28rpx;"
							maxlength="6"
							:clearable="false"
							v-model="loginForm.password"
							placeholder="请输入验证码"
						/>
						<view class="code_text" v-if="count == 0" @click="getCode">
							获取验证码
						</view>
						<view class="code_text_" v-else>({{ count }}s)后重新获取</view>
					</view>
				</uni-forms>
			</view>
			<view class="footer">
				<view class="forget" @click="onForget">忘记密码</view>
			</view>
			<view class="look_agree">
				<radio
					:checked="checked"
					@click="radioChange"
					style="transform: scale(0.8)"
					color="#007cff"
				></radio>
				<view class="l_text">
					我已阅读并同意
					<view class="link_a" @click="lookPDF()">《服务协议》</view>
					和
					<view class="link_a" @click="lookPDF2()">《隐私政策》</view>
				</view>
			</view>
			<view class="btn" v-if="loginForm.type == 2">
				<button
					type="primary"
					:class="{
						btn_bg:
							loginForm.phone.length == 11 && loginForm.password && checked,
					}"
					class="btn_sty"
					:disabled="
						!(loginForm.phone.length == 11 && loginForm.password && checked)
					"
					@click="onLogin"
				>
					登录
				</button>
			</view>
			<view class="btn" v-else>
				<button
					type="primary"
					:class="{
						btn_bg:
							loginForm.phone.length == 11 &&
							loginForm.password.length == 6 &&
							checked,
					}"
					class="btn_sty"
					:disabled="
						!(
							loginForm.phone.length == 11 &&
							loginForm.password.length == 6 &&
							checked
						)
					"
					@click="onLogin"
				>
					登录
				</button>
			</view>
			<view class="btn" @click="goPageRegister">
				<button type="default" class="btn_reg">注册</button>
			</view>
		</view>
		<uni-popup ref="popup">
			<view
				class=""
				style="
					margin: 40rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
				"
			>
				<view class="" style="height: 70vh; overflow-y: auto">
					<agreement></agreement>
				</view>
				<view
					class="btn"
					style="
						font-size: 28rpx;
						margin-top: 20rpx;
						border: 1px solid #eee;
						padding: 12rpx 24rpx;
						border-radius: 10rpx;
					"
				>
					<view @click="popup.close()">关闭</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2">
			<view
				class=""
				style="
					margin: 40rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
				"
			>
				<view class="" style="height: 70vh; overflow-y: auto">
					<policyAgree></policyAgree>
				</view>
				<view
					class="btn"
					style="
						font-size: 28rpx;
						margin-top: 20rpx;
						border: 1px solid #eee;
						padding: 12rpx 24rpx;
						border-radius: 10rpx;
					"
				>
					<view @click="popup2.close()">关闭</view>
				</view>
			</view>
		</uni-popup>
		<view class="wx_bot">
			<OtherLogin
				:checked="checked"
				:type="loginForm.type"
				@change_type="loginForm.type = $event"
			></OtherLogin>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref, reactive, onMounted, watch, nextTick} from 'vue';
	import {onLoad, onShow} from '@dcloudio/uni-app';
	import apiLogin from '@/util/network_api/login.js';
	import apiCode from '@/util/network_api/getcode.js';
	import OtherLogin from '@/components/u-network/OtherLogin.vue';
	import RolePlay from '@/components/role-play/role-play.vue';
	import md5 from 'js-md5';
	import roleStore from '@/store/role-play.js';
	import agreement from '@/pages/agreement/index.vue';
	import policyAgree from '@/pages/agreement/policy-agree.vue';

	const navbarStatusHeight = ref(0);
	const navBarHeight = ref(0);
	const navBarWidth = ref(375);
	onLoad(async (e) => {
		roleStore.commit('set_rolePlay', 'u-network');
		if (e?.custCode) {
			uni.setStorageSync('custCode', e?.custCode);
		}
		const info = uni.getSystemInfoSync();
		navbarStatusHeight.value = info.statusBarHeight;
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS|| MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect();
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value =
			menuInfo.bottom -
			info.statusBarHeight +
			(menuInfo.top - info.statusBarHeight);
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left;
		// #endif
		if (uni.getStorageSync('dd-access-network_pws')) {
			const dataValue = uni.getStorageSync('dd-access-network_pws');
			loginForm.value.password = dataValue.pws;
			loginForm.value.phone = dataValue.phone;
		}
	});
	// 校验密码非中文
	const pattern = (v) => {
		return v.replace(/[\u4E00-\u9FA5\s]/g, '');
	};
	const popup = ref();
	// 查看协议
	const lookPDF = () => {
		popup.value.open();
	};
	const popup2 = ref();
	// 查看协议
	const lookPDF2 = () => {
		popup2.value.open();
	};
	const loginForm = ref({
		phone: '', //手机号/登录账号
		password: '', //登录密码/验证码
		rememberMe: false, //记住我：true-是，false-否
		type: 2, //登录类型：1-验证码登录，2-账号密码登录
	});
	const count = ref(0); //倒计时
	const clear = ref(null);
	const checked = ref(false);
	const radioChange = (e) => {
		checked.value = !checked.value;
	};
	const loading = ref(false); //加载中
	// 监听登录类型 重置==>登录密码/验证码
	watch(
		() => loginForm.value.type,
		(n) => {
			loginForm.value.password = '';
			clear.value = null;
			count.value = 0;
		},
	);
	// 跳转到重置密码
	const onForget = () => {
		uni.navigateTo({
			url: '/pages/pages_network/login/forget?phone=' + loginForm.value.phone,
		});
	};
	// 登录
	const onLogin = async () => {
		if (!/^1[^1^2]\d{9}$/.test(loginForm.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: 'none',
			});
			return;
		}
		if (loginForm.value.type == 1) {
			if (isNaN(parseFloat(loginForm.value.password))) {
				uni.showToast({
					title: '请输入正确的验证码!',
					position: 'top',
					icon: 'none',
				});
				return;
			}
		}
		//显示加载框
		uni.showLoading({
			title: '加载中',
			mask: true,
		});
		loading.value = true;
		//隐藏加载框
		loading.value = false;
		await successfullyLogin();
		uni.hideLoading();
	};
	// 获取验证码
	const getCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(loginForm.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: 'none',
			});
			return;
		}
		count.value = 59;
		clear.value = setInterval(() => {
			count.value -= 1;
			if (count.value == 0) {
				clearInterval(clear.value);
			}
		}, 1000);
		await apiCode
			.loginCode({
				phone: loginForm.value.phone,
			})
			.then((res) => {
				if (res.code === 20000) {
					uni.showToast({
						title: res.message,
						icon: 'none',
						position: 'top',
					});
				}
			});
	};
	const goPageRegister = () => {
		uni.redirectTo({
			url: '/pages/pages_network/login/register',
		});
	};
	// 登录成功
	const successfullyLogin = async () => {
		let data = JSON.parse(JSON.stringify(loginForm.value));
		if (loginForm.value.type == 2) {
			data.password = (md5 as any)(loginForm.value.password);
		}
		await apiLogin.login(data).then((res) => {
			if (res.code === 20000) {
				const logintime = new Date().getTime();
				let dataValue = {
					logintime: logintime, //当前登录时间戳
					token: res.data.row.tokenValue, // 设置token值
					refreshToken: res.data.row.refreshToken, //刷新token
					tokenName: res.data.row.tokenName, //token请求头
					timeToken: res.data.row.expireIn, //过期时间(秒)
				};
				uni.setStorageSync('dd-access-network_pws', {
					pws: loginForm.value.type == 2 ? loginForm.value.password : '',
					phone: loginForm.value.phone,
				});
				uni.setStorageSync('dd-access-network', dataValue);
				// 登录成功后跳转
				uni.navigateTo({
					url: '/pages/pages_network/login/role',
				});
			}
		});
	};
</script>

<style lang="scss" scoped>
	.app_main {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/network/login/bg_login.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		display: flex;
		flex-direction: column;

		.navbar {
			.fixed {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
				width: 100%;

				.navbar-content {
					display: flex;
					align-items: center;
				}

				.header_ele {
					height: 120rpx;
				}
			}
		}

		.logo_main {
			/* #ifdef MP-WEIXIN */
			padding: 50rpx 60rpx 20rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			padding: 120rpx 60rpx 20rpx;
			/* #endif */
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0 0;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			flex: 1;

			.title_log_in {
				margin: 0rpx 0 60rpx;

				.m_title {
					font-size: 48rpx;
					color: #000;
					font-weight: 700;
					margin-bottom: 20rpx;
				}

				.tip {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.6);
				}
			}

			.login {
				:deep(.is-input-border) {
					// border-radius: 80rpx !important;
					// background-color: rgba(243, 244, 248, 1) !important;
					background-color: transparent !important;
					// padding: 10rpx;
					margin: 20rpx 0;
					border: none;
					border-bottom: 1rpx solid #ccc;
					border-radius: 0;
					height: 90rpx;

					&.is-focused {
						.uniui-clear,
						.uniui-eye-filled {
							color: #007cff99 !important;
						}
					}
				}

				.code_re {
					position: relative;

					.code_text {
						height: 30rpx;
						line-height: 30rpx;
						font-size: 28rpx;
						color: #007cff;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
						z-index: 2;
					}

					.code_text_ {
						height: 30rpx;
						font-size: 28rpx;
						line-height: 30rpx;
						color: #999;
						position: absolute;
						top: calc(50% - 15rpx);
						right: 30rpx;
					}
				}
			}

			.hint {
				margin-left: 60rpx;
				margin-bottom: 10rpx;
			}

			.look_agree {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: rgba(128, 128, 128, 1);

				.l_text {
					display: flex;
					align-items: center;

					.link_a {
						color: #007cff;
					}
				}
			}

			.btn {
				margin-top: 30rpx;

				.btn_sty {
					border-radius: 90rpx;
					background-color: #007cff6b;
					line-height: 90rpx;
					height: 90rpx;
					font-size: 32rpx;
					color: #fff;
				}

				:deep(button::after) {
					border: none !important;
				}

				.btn_bg {
					background-color: #007cff;
				}

				.btn_reg {
					border-radius: 90rpx;
					border: 2rpx solid #eee;
					line-height: 90rpx;
					height: 90rpx;
					font-size: 32rpx;
					background-color: #fff;
				}
			}

			.footer {
				margin: 30rpx 0;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 24rpx;
				width: 100%;

				.forget {
					color: #007cff;
				}

				.changeLogin {
					color: rgba(0, 21, 40, 1);
				}
			}
		}

		.wx_bot {
			margin-top: 10%;
		}
	}

	:deep(.uni-select) {
		border: none !important;
		padding: 0;

		.uni-icons {
			display: none;
		}

		.uni-select__input-placeholder {
			text-align: right;
			margin-right: 12rpx;
			font-size: 28rpx;
			color: #999;
		}

		.uni-select__input-text {
			text-align: right;
			margin-right: 12rpx;
			color: #fff;
		}

		.uni-popper__arrow {
			left: 20%;
		}

		.uni-select__selector {
			top: 100%;
			width: 180rpx;
		}
	}
</style>
